﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="FRMeta.aspx.cs" Inherits="IMPPFront.Management.Metadata" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <ext:Store ID="KaderStore" runat="server" AutoSave="true" OnBeforeStoreChanged="HandleRefCodeChanges" 
    SkipIdForNewRecords="false" RefreshAfterSaving="Auto" OnRefreshData="KaderStore_Refresh">
        <Reader>
            <ext:JsonReader IDProperty="idRefCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="idRefCode" Type="Int" DefaultValue="101" />
                    <ext:RecordField Name="refCodeDetail" DefaultValue="0"/>
                    <ext:RecordField Name="Description" AllowBlank="false" />
                    <ext:RecordField Name="ShortDescription" AllowBlank="false" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <Exception Handler="
                Ext.net.Notification.show({
                    iconCls    : 'icon-exclamation', 
                    html       : e.message, 
                    title      : 'EXCEPTION', 
                    autoScroll : true, 
                    hideDelay  : 5000, 
                    width      : 300, 
                    height     : 200
                });" />
            <BeforeSave Handler="var valid = true; this.each(function(r){if(r.dirty && !r.isValid()){valid=false;}}); return valid;" />
        </Listeners>
    </ext:Store>
    <ext:Store ID="KaderCombo" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="refCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="refCodeDetail" />
                    <ext:RecordField Name="Description" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="FamilieStore" runat="server" AutoSave="true" OnBeforeStoreChanged="HandleRefCodeChanges" 
    SkipIdForNewRecords="false" RefreshAfterSaving="Auto" OnRefreshData="FamilieStore_Refresh" RemotePaging="false" RemoteSort="false">
        <Reader>
            <ext:JsonReader IDProperty="idRefCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="idRefCode" Type="Int" DefaultValue="102" />
                    <ext:RecordField Name="refCodeDetail" DefaultValue="0"/>
                    <ext:RecordField Name="Description" AllowBlank="false" />
                    <ext:RecordField Name="ShortDescription" AllowBlank="false" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <Exception Handler="
                Ext.net.Notification.show({
                    iconCls    : 'icon-exclamation', 
                    html       : e.message, 
                    title      : 'EXCEPTION', 
                    autoScroll : true, 
                    hideDelay  : 5000, 
                    width      : 300, 
                    height     : 200
                });" />
            <BeforeSave Handler="var valid = true; this.each(function(r){if(r.dirty && !r.isValid()){valid=false;}}); return valid;" />
        </Listeners>
    </ext:Store><ext:Store ID="FamilieCombo" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="refCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="refCodeDetail" />
                    <ext:RecordField Name="Description" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="NiveauStore" runat="server" AutoSave="true" OnBeforeStoreChanged="HandleRefCodeChanges" 
    SkipIdForNewRecords="false" RefreshAfterSaving="Auto" OnRefreshData="NiveauStore_Refresh" RemotePaging="false" RemoteSort="false">
        <Reader>
            <ext:JsonReader IDProperty="idRefCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="idRefCode" Type="Int" DefaultValue="104" />
                    <ext:RecordField Name="refCodeDetail" DefaultValue="0"/>
                    <ext:RecordField Name="Description" AllowBlank="false" />
                    <ext:RecordField Name="ShortDescription" AllowBlank="false" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <Exception Handler="
                Ext.net.Notification.show({
                    iconCls    : 'icon-exclamation', 
                    html       : e.message, 
                    title      : 'EXCEPTION', 
                    autoScroll : true, 
                    hideDelay  : 5000, 
                    width      : 300, 
                    height     : 200
                });" />
            <BeforeSave Handler="var valid = true; this.each(function(r){if(r.dirty && !r.isValid()){valid=false;}}); return valid;" />
        </Listeners>
    </ext:Store>
    <ext:Store ID="NiveauCombo" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="refCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="refCodeDetail" />
                    <ext:RecordField Name="Description" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="GroepStore" runat="server" AutoSave="true" OnBeforeStoreChanged="HandleRefCodeChanges" 
    SkipIdForNewRecords="false" RefreshAfterSaving="Auto" OnRefreshData="GroepStore_Refresh" RemotePaging="false" RemoteSort="false">
        <Reader>
            <ext:JsonReader IDProperty="idRefCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="idRefCode" Type="Int" DefaultValue="103" />
                    <ext:RecordField Name="refCodeDetail" DefaultValue="0"/>
                    <ext:RecordField Name="Description" AllowBlank="false" />
                    <ext:RecordField Name="ShortDescription" AllowBlank="false" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <Listeners>
            <Exception Handler="
                Ext.net.Notification.show({
                    iconCls    : 'icon-exclamation', 
                    html       : e.message, 
                    title      : 'EXCEPTION', 
                    autoScroll : true, 
                    hideDelay  : 5000, 
                    width      : 300, 
                    height     : 200
                });" />
            <BeforeSave Handler="var valid = true; this.each(function(r){if(r.dirty && !r.isValid()){valid=false;}}); return valid;" />
        </Listeners>
    </ext:Store>
    <ext:Store ID="GroepCombo" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="refCodeDetail">
                <Fields>
                    <ext:RecordField Name="idRefCodeDetail" />
                    <ext:RecordField Name="refCodeDetail" />
                    <ext:RecordField Name="Description" />
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Panel ID="MainPanel" runat="server" Frame="false" Border="false">
        <Items>
            <ext:Image runat="server" ImageUrl="~/Images/LogoHH.png" Width="192" />
            <ext:Container ID="RootContainer" runat="server" Layout="VBoxLayout" Height="440">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
                <ext:Container ID="FirstRowContainer" runat="server" Layout="HBoxLayout" Flex="1">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Padding="0 0 5 0" Align="Stretch" />
                </LayoutConfig>
                <Items>
            <ext:GridPanel runat="server" ID="KaderRefPanel" Margins="0 2 0 15" Flex="1" Title="Functiekaders" Height="220" AutoScroll="true" StoreID="KaderStore">
                <TopBar>
                    <ext:Toolbar runat="server" ID="KRToolbar">
                        <Items>
                            <ext:Button runat="server" ID="AddKRButton" Icon="Add" Text="Functierol">
                                <Listeners>
                                    <Click Handler="#{KaderRefPanel}.insertRecord();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="DeleteKRButton" runat="server" Text="Delete" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="#{KaderRefPanel}.deleteSelected();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{KaderRefPanel}.save();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel runat="server" ID="KaderRefModel">
                    <Columns>
                        <ext:Column Header="Id" DataIndex="idRefCodeDetail" />
                        <ext:Column Header="RefCode" DataIndex="idRefCode" />
                        <ext:Column Header="Omschrijving" DataIndex="Description" >
                            <Editor>
                                <ext:TextField runat="server" ID="KaderDescField" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Korte omschrijving" DataIndex="ShortDescription">
                            <Editor>
                                <ext:TextField runat="server" ID="KaderShortDescField" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="KaderRefSelectionModel" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolbar ID="KaderRefPagingTB" runat="server" PageSize="5" />
                </BottomBar>
            </ext:GridPanel>
            <ext:GridPanel runat="server" ID="FamilieRefPanel" Margins="0 15 0 2" Flex="1" Title="Functiefamilies" Height="220" AutoScroll="true" StoreID="FamilieStore">
                <TopBar>
                    <ext:Toolbar runat="server" ID="FamilieRefTB">
                        <Items>
                            <ext:Button runat="server" ID="Button2" Icon="Add" Text="Functierol">
                                <Listeners>
                                    <Click Handler="#{FamilieRefPanel}.insertRecord();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button3" runat="server" Text="Delete" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="#{FamilieRefPanel}.deleteSelected();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button4" runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{FamilieRefPanel}.save();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel runat="server" ID="FamilieRefModel">
                    <Columns>
                        <ext:Column Header="Id" DataIndex="idRefCodeDetail" />
                        <ext:Column Header="RefCode" DataIndex="idRefCode" />
                        <ext:Column Header="Omschrijving" DataIndex="Description" >
                            <Editor>
                                <ext:TextField runat="server" ID="FamilieDescTF" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Korte omschrijving" DataIndex="ShortDescription">
                            <Editor>
                                <ext:TextField runat="server" ID="FamilieShortDescTF" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="FamilieRefSM" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolbar ID="FamilieRefPB" runat="server" PageSize="5" />
                </BottomBar>
            </ext:GridPanel>
            </Items>
            </ext:Container>
            <ext:Container ID="SecondRowContainer" runat="server" Layout="HBoxLayout" Flex="1">
                <LayoutConfig>
                    <ext:HBoxLayoutConfig Padding="0 0 5 0" Align="Stretch" />
                </LayoutConfig>
                <Items>
            <ext:GridPanel runat="server" ID="NiveaRefPanel" Flex="1" Margins="0 2 0 15" Title="Functieniveau" Height="220" AutoScroll="true" StoreID="NiveauStore">
                <TopBar>
                    <ext:Toolbar runat="server" ID="Toolbar1">
                        <Items>
                            <ext:Button runat="server" ID="Button5" Icon="Add" Text="Functieniveau">
                                <Listeners>
                                    <Click Handler="#{NiveauRefPanel}.insertRecord();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button6" runat="server" Text="Delete" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="#{NiveauRefPanel}.deleteSelected();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button7" runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{NiveauRefPanel}.save();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel runat="server" ID="NiveauRefCM">
                    <Columns>
                        <ext:Column Header="Id" DataIndex="idRefCodeDetail" />
                        <ext:Column Header="RefCode" DataIndex="idRefCode" />
                        <ext:Column Header="Omschrijving" DataIndex="Description" >
                            <Editor>
                                <ext:TextField runat="server" ID="NiveauDescTF" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Korte omschrijving" DataIndex="ShortDescription">
                            <Editor>
                                <ext:TextField runat="server" ID="NiveauShortDescTF" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="NiveauRefSM" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolbar ID="NiveauRefPT" runat="server" PageSize="5" />
                </BottomBar>
            </ext:GridPanel>
            <ext:GridPanel runat="server" ID="GroepRefPanel" Flex="1" Margins="0 15 0 2" Title="Functiegroepen" Height="220" AutoScroll="true" StoreID="GroepStore">
                <TopBar>
                    <ext:Toolbar runat="server" ID="GroepRefTB">
                        <Items>
                            <ext:Button runat="server" ID="Button8" Icon="Add" Text="Groep">
                                <Listeners>
                                    <Click Handler="#{GroepRefPanel}.insertRecord();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button9" runat="server" Text="Delete" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="#{GroepRefPanel}.deleteSelected();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button10" runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{GroepRefPanel}.save();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <ColumnModel runat="server" ID="GroepRefCM">
                    <Columns>
                        <ext:Column Header="Id" DataIndex="idRefCodeDetail" />
                        <ext:Column Header="RefCode" DataIndex="idRefCode" />
                        <ext:Column Header="Omschrijving" DataIndex="Description" >
                            <Editor>
                                <ext:TextField runat="server" ID="GroepDescTF" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Korte omschrijving" DataIndex="ShortDescription">
                            <Editor>
                                <ext:TextField runat="server" ID="GroepShortDescTF" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="GroepRefSM" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolbar ID="GroepRefPT" runat="server" PageSize="5" />
                </BottomBar>
            </ext:GridPanel>
            </Items>
            </ext:Container>
            </Items>
            </ext:Container>
            <ext:Container ID="Container1" runat="server" Layout="VBoxLayout" Height="400">
                <LayoutConfig>
                    <ext:VBoxLayoutConfig Align="Stretch" />
                </LayoutConfig>
                <Items>
            <ext:GridPanel runat="server" ID="FunctieRollenPanel" Margins="0 15 0 15" Title="Functierollen"  AutoHeight="true" AutoScroll="true">
                <TopBar>
                    <ext:Toolbar runat="server" ID="FRToolbar">
                        <Items>
                            <ext:Button runat="server" ID="AddFRButton" Icon="Add" Text="Functierol">
                                <Listeners>
                                    <Click Handler="#{FunctieRollenPanel}.insertRecord();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button ID="Button1" runat="server" Text="Delete" Icon="Exclamation">
                                <Listeners>
                                    <Click Handler="#{FunctieRollenPanel}.deleteSelected();" />
                                </Listeners>
                            </ext:Button>
                            <ext:Button runat="server" Text="Save" Icon="Disk">
                                <Listeners>
                                    <Click Handler="#{FunctieRollenPanel}.save();" />
                                </Listeners>
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Store>
                    <ext:Store ID="FunctieRollenStore" runat="server" AutoSave="true" OnBeforeStoreChanged="HandleChanges" SkipIdForNewRecords="false"
                                RefreshAfterSaving="None">                                          
                        <Reader>
                            <ext:JsonReader IDProperty="idFunctieRol">
                                <Fields>
                                    <ext:RecordField Name="idFunctieRol" />
                                    <ext:RecordField Name="Name" AllowBlank="false" />
                                    <ext:RecordField Name="KaderRefId" AllowBlank="false" />
                                    <ext:RecordField Name="FamilieRefId" AllowBlank="false" />                                   
                                    <ext:RecordField Name="NiveauRefId" AllowBlank="false" />
                                    <ext:RecordField Name="GroepRefId" AllowBlank="false" />
                                </Fields>
                            </ext:JsonReader>
                        </Reader>
                        <Listeners>
                            <Exception Handler="
                                Ext.net.Notification.show({
                                    iconCls    : 'icon-exclamation', 
                                    html       : e.message, 
                                    title      : 'EXCEPTION', 
                                    autoScroll : true, 
                                    hideDelay  : 5000, 
                                    width      : 300, 
                                    height     : 200
                                });" />
                            <BeforeSave Handler="var valid = true; this.each(function(r){if(r.dirty && !r.isValid()){valid=false;}}); return valid;" />
                        </Listeners>
                    </ext:Store>
                </Store>
                <ColumnModel runat="server" ID="FunctieRolModel">
                    <Columns>
                        <ext:Column Header="Id" DataIndex="idFunctieRol" />
                        <ext:Column Header="Rol" DataIndex="Name" Width="200" >
                            <Editor>
                                <ext:TextField runat="server" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Kader" DataIndex="KaderRefId">
                            <Renderer Fn="kaderRenderer" />
                            <Editor>
                                <ext:ComboBox ID="KaderComboBox" runat="server" Editable="false" DisplayField="Description" ValueField="refCodeDetail"
                                 ForceSelection="true" EmptyText="Selecter een Kader..." StoreID="KaderCombo" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Functie Familie" DataIndex="FamilieRefId">
                            <Renderer Fn="familieRenderer" />
                            <Editor>
                                <ext:ComboBox ID="FamilieComboBox" runat="server" Editable="false" DisplayField="Description" ValueField="refCodeDetail"
                                 ForceSelection="true" EmptyText="Selecteer een familie..." StoreID="FamilieCombo" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="Functie Niveau" DataIndex="NiveauRefId" >
                            <Renderer Fn="niveauRenderer" />
                            <Editor>
                                <ext:ComboBox ID="NiveauComboBox" runat="server" Editable="false" DisplayField="Description" ValueField="refCodeDetail"
                                 ForceSelection="true" EmptyText="Selecteer een niveau..." StoreID="NiveauCombo" />
                            </Editor>
                        </ext:Column>
                        <ext:Column Header="FunctieGroep" DataIndex="GroepRefId">
                            <Renderer Fn="groepRenderer" />
                            <Editor>
                                <ext:ComboBox ID="GroepComboBox" runat="server" Editable="false" DisplayField="Description" ValueField="refCodeDetail"
                                 ForceSelection="true" EmptyText="Selecteer een groep..." StoreID="GroepCombo" />
                            </Editor>
                        </ext:Column>
                    </Columns>
                </ColumnModel>
                <SelectionModel>
                    <ext:RowSelectionModel ID="FRSelectionModel" runat="server" />
                </SelectionModel>
                <LoadMask ShowMask="true" />
                <BottomBar>
                    <ext:PagingToolbar ID="FRPagingToolbar" runat="server" PageSize="10" />
                </BottomBar>
            </ext:GridPanel>
            </Items>
            </ext:Container>
        </Items>
    </ext:Panel>
    <script type="text/javascript">
        var kaderRenderer = function (value) {
            var r = MainContent_KaderCombo.getById(value);

                if (Ext.isEmpty(r)) {
                    return "";
                }

                return r.data.Description;
        };

        var familieRenderer = function (value) {
            var r = MainContent_FamilieCombo.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.Description;
        };

        var niveauRenderer = function (value) {
            var r = MainContent_NiveauCombo.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.Description;
        };

        var groepRenderer = function (value) {
            var r = MainContent_GroepCombo.getById(value);

            if (Ext.isEmpty(r)) {
                return "";
            }

            return r.data.Description;
        };
    </script>
</asp:Content>
